Button

#Button| 来源: 网络整理| 查看: 265

Button 项目 05/05/2023

.NET 多平台应用 UI (.NET MAUI) Button 显示文本并响应指示应用执行任务的点击或单击。 Button通常显示指示命令的短文本字符串，但它也可以显示位图图像，或者文本和图像的组合。 Button当用手指按下或用鼠标单击时，它会启动该命令。

Button 定义以下属性:

BorderColor，类型 Color为，描述按钮的边框颜色。 BorderWidth，属于类型 double，定义按钮边框的宽度。 CharacterSpacing，属于类型 double，用于定义按钮文本的字符之间的间距。 Command类型 ICommand为，定义在点击按钮时执行的命令。 CommandParameter，属于类型 object，是传递给 Command的参数。 ContentLayout，属于类型 ButtonContentLayout，定义对象，该对象控制按钮图像的位置以及按钮的图像与文本之间的间距。 CornerRadius类型 int为，描述按钮边框的角半径。 FontAttributes，属于类型 FontAttributes，确定文本样式。 FontAutoScalingEnabled类型 bool为，定义按钮文本是否反映操作系统中设置的缩放首选项。此属性的默认值为 true。 FontFamily，属于类型 string，定义字体系列。 FontSize，属于类型 double，定义字号。 ImageSource类型 ImageSource为，指定要显示为按钮内容的位图图像。 LineBreakMode类型 LineBreakMode为，确定当文本无法容纳在一行时应如何处理文本。 Padding类型 Thickness为，确定按钮的填充。 Text，属于类型 string，用于定义显示为按钮内容的文本。 TextColor，类型 Color为，描述按钮文本的颜色。 TextTransform类型 TextTransform为，定义按钮文本的大小写。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

注意

虽然 Button 定义了一个 ImageSource 属性，该属性允许你在上 Button显示图像，但该属性用于在文本旁边 Button 显示一个小图标时使用。

此外， Button 定义 Clicked、 Pressed和 Released 事件。当 Clicked 用手指或鼠标指针从按钮表面释放点击时 Button ，将引发该事件。 Pressed当手指按下 Button或按下鼠标按钮时，指针位于上时，Button将引发事件。释放 Released 手指或鼠标按钮时引发事件。通常， Clicked 事件也会与事件同时 Released 引发，但如果手指或鼠标指针在松开之前从表面 Button 滑出，则可能不会发生该 Clicked 事件。

重要

Button必须将其 IsEnabled 属性设置为 true ，才能响应点击。

创建按钮

若要创建按钮，请创建对象 Button 并处理其 Clicked 事件。

以下 XAML 示例演示如何创建 Button：

Text 属性指定在 Button 中显示的文本。事件 Clicked 设置为名为的 OnButtonClicked事件处理程序。此处理程序位于代码隐藏文件中：

public partial class BasicButtonClickPage : ContentPage { public BasicButtonClickPage () { InitializeComponent (); } async void OnButtonClicked(object sender, EventArgs args) { await label.RelRotateTo(360, 1000); } }

在此示例中，点击时 Button 执行 OnButtonClicked 方法。参数 sender 是 Button 负责此事件的对象。可以使用此访问Button对象，或区分共享同一Clicked事件的多个Button对象。处理程序 Clicked 调用动画函数，该函数在 1000 毫秒内旋转 Label 360 度：

用于创建的 Button 等效 C# 代码为：

Button button = new Button { Text = "Click to Rotate Text!", VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center }; button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000); 使用命令接口

应用可以在不处理Clicked事件的情况下响应Button点击。 Button实现称为命令或命令接口的替代通知机制。这由两个属性组成：

Command 类型 ICommand为，在命名空间中 System.Windows.Input 定义的接口。 CommandParameter 类型的 Object属性。

此方法特别适用于数据绑定，尤其是在实现 Model-View-ViewModel (MVVM) 模式时。在 MVVM 应用程序中，viewmodel 定义类型的 ICommand 属性，这些属性随后会连接到 Button 具有数据绑定的对象。 .NET MAUI 还定义 Command 和 Command 类，这些类实现 ICommand 接口并帮助 viewmodel 定义类型的 ICommand属性。有关命令的详细信息，请参阅命令。

以下示例演示了一个非常简单的 viewmodel 类，该类定义一个名为 Number类型的double属性和两个名为 MultiplyBy2Command 和 DivideBy2Command类型的ICommand属性：

public class CommandDemoViewModel : INotifyPropertyChanged { double number = 1; public event PropertyChangedEventHandler PropertyChanged; public ICommand MultiplyBy2Command { get; private set; } public ICommand DivideBy2Command { get; private set; } public CommandDemoViewModel() { MultiplyBy2Command = new Command(() => Number *= 2); DivideBy2Command = new Command(() => Number /= 2); } public double Number { get { return number; } set { if (number != value) { number = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number")); } } } }

在此示例中，这两 ICommand 个属性在类的构造函数中使用两个类型的 Command对象进行初始化。构造 Command 函数包括一个小函数 (称为 execute 构造函数参数) ，该函数将属性的值 Number 加倍或减半。

以下 XAML 示例使用 CommandDemoViewModel 类：

在此示例中， Label 元素和两个 Button 对象包含到类中三个属性的 CommandDemoViewModel 绑定。点击这两 Button 个对象时，将执行命令，并且数字会更改值。与处理程序相比 Clicked ，此方法的优势在于，涉及此页面功能的所有逻辑都位于 viewmodel 中，而不是代码隐藏文件中，从而更好地将用户界面与业务逻辑分开。

对象还可以 Command 控制对象的启用和禁用 Button 。例如，假设你想要将数字值的范围限制在 210 和 2-10 之间。可以将另一个函数添加到构造函数 (名为 canExecute 参数) ，如果Button应启用，则返回 true ：

public class CommandDemoViewModel : INotifyPropertyChanged { ··· public CommandDemoViewModel() { MultiplyBy2Command = new Command( execute: () => { Number *= 2; ((Command)MultiplyBy2Command).ChangeCanExecute(); ((Command)DivideBy2Command).ChangeCanExecute(); }, canExecute: () => Number < Math.Pow(2, 10)); DivideBy2Command = new Command( execute: () => { Number /= 2; ((Command)MultiplyBy2Command).ChangeCanExecute(); ((Command)DivideBy2Command).ChangeCanExecute(); }, canExecute: () => Number > Math.Pow(2, -10)); } ··· }

在此示例中，需要调用 ChangeCanExecute 的方法，Command以便该方法可以调用 canExecute 方法并确定是否Button应Command禁用。此代码更改后，当数字达到限制时， Button 将禁用。

还可以将两个或更多 Button 个元素绑定到同一 ICommand 属性。 Button可以使用的 Button属性来区分CommandParameter元素。在这种情况下，需要使用泛型 Command 类。然后，对象 CommandParameter 作为参数传递给 execute 和 canExecute 方法。有关详细信息，请参阅命令。

按下并松开按钮

Pressed当手指按下 Button或按下鼠标按钮时，指针位于上时，Button将引发事件。释放 Released 手指或鼠标按钮时引发事件。通常， Clicked 事件也会与事件同时 Released 引发，但如果手指或鼠标指针在松开之前从表面 Button 滑出，则可能不会发生该 Clicked 事件。

下面的 XAML 示例演示Label了，以及为和 ButtonReleased 事件附加了处理程序的 Pressed ：

代码隐藏文件在事件发生时Pressed对进行Label动画处理，但在事件发生时Released暂停旋转：

public partial class PressAndReleaseButtonPage : ContentPage { IDispatcherTimer timer; Stopwatch stopwatch = new Stopwatch(); public PressAndReleaseButtonPage() { InitializeComponent(); timer = Dispatcher.CreateTimer(); timer.Interval = TimeSpan.FromMilliseconds(16); timer.Tick += (s, e) => { label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1); }; } void OnButtonPressed(object sender, EventArgs args) { stopwatch.Start(); timer.Start(); } void OnButtonReleased(object sender, EventArgs args) { stopwatch.Stop(); timer.Stop(); } }

结果是， Label 在手指与 Button接触时，仅旋转，在释放手指时停止。

按钮视觉状态

Button 具有， PressedVisualState 它可用于在按下时启动对 Button 的视觉更改，前提是已启用。

以下 XAML 示例演示如何定义状态的 Pressed 视觉状态：

在此示例中， PressedVisualState 指定按下时 Button ，其 Scale 属性将从默认值 1 更改为 0.8。指定 NormalVisualState 当处于正常状态时 Button ，其 Scale 属性将设置为 1。因此，整体效果是，按下时 Button ，会将其重新缩放为略小，释放时 Button ，会将其重新缩放为默认大小。

有关视觉状态的详细信息，请参阅视觉状态。

将位图与按钮配合使用

类 Button 定义一个 ImageSource 属性，该属性允许你在上 Button单独显示或与文本一起显示小位图图像。还可以指定文本和图像的排列方式。属性 ImageSource 的类型 ImageSource为，这意味着可以从文件、嵌入的资源、URI 或流加载位图。

可以使用的 Text 属性指定和 ImageSource 属性的ContentLayoutButton排列Button方式。此属性的类型 ButtonContentLayout为，其构造函数具有两个参数：

枚举的成员 ImagePosition ： Left、 Top、 Right或 Bottom ，指示位图相对于文本的显示方式。位 double 图和文本之间的间距值。

在 XAML 中，可以创建 Button 并设置属性， ContentLayout 只需指定枚举成员或间距，或同时指定两者，以逗号分隔的任何顺序：

等效 C# 代码如下：

Button button = new Button { Text = "Button text", ImageSource = new FileImageSource { File = "button.png" }, ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20) }; 禁用按钮

有时，应用进入单击不是有效操作的状态 Button 。在这种情况下，可以通过将 Button 的 IsEnabled 属性设置为 false 来对其进行禁用。

【本文地址】

公司简介

联系我们